<!DOCTYPE html>
<html lang="zh">

<head>
    <title>豆包语音识别设置</title>
    <link id="theme" rel="stylesheet" type="text/css" href="../css/light.css">
    <link rel="stylesheet" type="text/css" href="../css/fonts.css">
    <style>
        .config-section {
            margin: 15px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background: #f9f9f9;
        }
        
        .config-title {
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 10px;
            color: #333;
        }
        
        .config-description {
            font-size: 12px;
            color: #666;
            margin-bottom: 15px;
            line-height: 1.4;
        }
        
        .input-group {
            margin: 10px 0;
        }
        
        .input-label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }
        
        .input-field {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-family: inherit;
        }
        
        .input-field:focus {
            outline: none;
            border-color: #007acc;
            box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.2);
        }
        
        .test-section {
            margin-top: 20px;
            padding: 15px;
            background: #f0f8ff;
            border: 1px solid #b0d4f1;
            border-radius: 8px;
        }
        
        .test-result {
            margin-top: 10px;
            padding: 10px;
            border-radius: 4px;
            font-family: monospace;
            font-size: 12px;
            white-space: pre-wrap;
        }
        
        .test-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .test-error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .test-info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        
        .button-group {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .test-btn {
            background: #28a745;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .test-btn:hover {
            background: #218838;
        }
        
        .test-btn:disabled {
            background: #6c757d;
            cursor: not-allowed;
        }
        
        .voice-demo-section {
            margin-top: 20px;
            padding: 15px;
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 8px;
        }
        
        .voice-btn {
            background: #17a2b8;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-right: 10px;
        }
        
        .voice-btn:hover {
            background: #138496;
        }
        
        .voice-btn.recording {
            background: #dc3545;
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.7; }
            100% { opacity: 1; }
        }
        
        .demo-result {
            margin-top: 10px;
            padding: 10px;
            background: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            min-height: 60px;
            font-family: inherit;
        }
    </style>
</head>

<body class="dialogBody" onload="new DoubaoSettings();" style="overflow-y: auto; max-height: 100vh;">
    <div class="config-section">
        <div class="config-title">🎤 豆包语音识别配置</div>
        <div class="config-description">
            配置豆包大模型流式语音识别服务，实现实时语音转文字功能。<br>
            需要在火山引擎控制台获取APP ID和Access Token。
        </div>
        
        <div class="input-group">
            <label for="appKeyInput" class="input-label">APP ID (X-Api-App-Key)</label>
            <input type="text" id="appKeyInput" class="input-field" placeholder="请输入豆包APP ID">
        </div>
        
        <div class="input-group">
            <label for="accessKeyInput" class="input-label">Access Token (X-Api-Access-Key)</label>
            <input type="password" id="accessKeyInput" class="input-field" placeholder="请输入豆包Access Token">
        </div>
        
        <div class="input-group">
            <label for="urlInput" class="input-label">WebSocket服务地址</label>
            <input type="text" id="urlInput" class="input-field" value="wss://openspeech.bytedance.com/api/v3/sauc/bigmodel" readonly>
        </div>
        
        <div class="input-group">
            <label for="resourceIdInput" class="input-label">资源ID</label>
            <input type="text" id="resourceIdInput" class="input-field" value="volc.bigasr.sauc.duration" readonly>
        </div>

        <div class="input-group">
            <label for="microphoneSelect" class="input-label">麦克风设备</label>
            <select id="microphoneSelect" class="input-field">
                <option value="">正在加载麦克风设备...</option>
            </select>
            <button id="refreshMicBtn" class="test-btn" style="margin-top: 5px;">刷新设备列表</button>
        </div>
    </div>
    
    <div class="test-section">
        <div class="config-title">🔗 连接测试</div>
        <div class="button-group">
            <button id="testConnectionBtn" class="test-btn">测试连接</button>
            <span id="testStatus">点击测试连接以验证配置</span>
        </div>
        <div id="testResult" class="test-result" style="display: none;"></div>
    </div>
    
    <div class="voice-demo-section">
        <div class="config-title">🎙️ 语音识别演示</div>
        <div class="config-description">
            保存配置后，可以测试语音识别功能
        </div>
        <div class="button-group">
            <button id="voiceDemoBtn" class="voice-btn" disabled>🎤 开始录音</button>
            <span id="voiceStatus">请先保存配置</span>
        </div>
        <div id="demoResult" class="demo-result" style="display: none;"></div>
    </div>

    <div class="buttonArea">
        <button id="saveConfigBtn">保存配置</button>
        <button id="cancelBtn" style="margin-left: 10px;">取消</button>
    </div>

    <script src="../js/doubaoSettings.js"></script>
</body>

</html> 